<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>订单列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="../mui/hello-mui/css/mui.min.css">
    <!-- 扩展图标库 -->
    <link rel="stylesheet" href="../mui/hello-mui/css/icons-extra.css" type="text/css">
    <!-- de-css -->
    <link rel="stylesheet" href="../dece/css/de-css.css">

    <script src="../dece/js/app.js" type="text/javascript"></script>
    <script src="../dece/js/vue.js" type="text/javascript"></script>
    <script src="../dece/js/axios.min.js" type="text/javascript"></script>
    <!-- 引入饿了么样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入饿了么组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style type="text/css">
        .empty_order {
            display: flex;
            flex-flow: column nowrap;
            justify-content: flex-start;
            align-items: center;
        }
        .empty_order > img {
            width: 120px;
            height: 120px;
            margin: 40px 0 20px 0;
        }
        .empty_order > span {
            font-size: 19px;
            color: #999;
            margin: 0px;
        }
        /*订单上标签页*/
        .order_head {
            display: flex;
            justify-content: space-around;
            background: white;
            height: 45px;
        }
        .order_head > div {
            display: flex;
            align-items: center;
            height: 100%;
        }
        /*下面蓝色杠杠*/
        .show {
            border-bottom: 2px solid #409EFF;
        }
        /*订单盒子*/
        .order_box {
            display: flex;
            flex-flow: column nowrap;
            justify-content: space-between;
            background: white;
            border-radius: 10px;
            min-height: 220px;
            margin: 10px;
        }
        .order_box .first {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 22px;
            height: 47px;
        }
        .order_box .first > span {
            font-size: 14px;
        }
        .order_box .first > div {
            font-size: 14px;
            color: #F56C6C;
        }
        .order_box .content {
            display: flex;
            padding: 0 22px 12px;
        }
        .order_box .content > img {
            height: 86px;
            width: 86px;
            border-radius: 10px;
        }
        .order_box .content > .goods {
            display: flex;
            justify-content: space-between;
            width: 200px;
            font-size: 14px;
        }
        .order_box .content > .goods > div:nth-child(2) {
            display: flex;
            flex-flow: column nowrap;
            align-items: flex-end;
            font-size: 12px;
            color: #606266;
        }
        .goods > div:nth-child(2) > label {
            max-width: 68px;
        }
        .price {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding: 0 22px;
            min-height: 24px;
            color: #F56C6C;
        }
        .last {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            height: 50px;
            border-top: 1px solid #F2F6FC;
        }
        .last > button {
            height: 30px;
            font-size: 12px;
            min-width: 80px;
            border-radius: 20px;
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <header class="mui-bar mui-bar-transparent">
            <a href="javascript:history.go(-1);" class="mui-icon mui-action-back mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">订单列表</h1>
        </header>
        <div class="mui-content" style="margin-top: 44px;">
            <div class="order_head">
                <div :class="{'show': show == 6}" @click="order_get(6)">全部</div>
                <div :class="{'show': show == 0}" @click="order_get(0)">待付款</div>
                <div :class="{'show': show == 1}" @click="order_get(1)">代发货</div>
                <div :class="{'show': show == 2}" @click="order_get(2)">待收货</div>
                <div :class="{'show': show == 3}" @click="order_get(3)">已完成</div>
            </div>
                
            <template v-if="order">
                <div v-for="row in order" class="order_box">
                    <div class="first">
                        <span>灵丘薄利龙</span>
                        <div v-if="row.stat == 0">
                            待付款
                        </div>
                        <div v-else-if="row.stat == 1">
                            已付款
                        </div>
                        <div v-else-if="row.stat == 2">
                            已发货
                        </div>
                        <div v-else-if="row.stat == 3">
                            交易成功
                        </div>
                    </div>
                    <template v-for="it in row.order_item">
                        <div class="content">
                            <img :src="api_host + it.images">
                            <div class="goods">
                                <div>
                                    <span>{{it.goods_name}}</span>
                                </div>
                                <div>
                                    <label>￥{{it.special_price}}</label>
                                    <label>X{{it.number}}</label>
                                </div>
                            </div>
                        </div>
                    </template>
                    <div class="price">
                        <label>总价￥{{row.price}}</label>
                    </div>
                    <div class="last">
                        <template v-if="row.stat == 0">
                            <button>付款</button>
                        </template>
                        <template v-else-if="row.stat == 1">
                            <button @click="order_confirm(row.id)">确认收货</button>
                            <button>退款</button>
                        </template>
                        <template v-else-if="row.stat == 2">
                            <button @click="order_confirm(row.id)">确认收货</button>
                        </template>
                    </div>
                </div>
            </template>
            <template v-else>
                <div class="empty_order">
                    <img src="../mui/img/kongdingdan.png">
                    <span>订单为空</span>
                </div>
            </template>
        </div>
    </div>
    <script type="text/javascript" charset="utf-8">
        new Vue({
            el: "#app",
            data: {
                api_host: de.api_host,
                order: {},
                show: 0,
            },
            created: function (){
                // 验证是否登陆
                if (!de.auth_login()) {
                    de.href("../login.html");
                }
                this.order_get();
            },
            mounted: function (){
            },
            methods: {
                // 获取收货地址信息
                order_get: function ( key ){
                    var tid = de.get('tid');
                    tid = tid == undefined || tid == false ? 0 : tid ;
                    this.tid = key == undefined ? tid : key ;
                    this.show = this.tid;
                    var the = this;
                    var login = de.auth_login();
                    // 提交数据
                    axios.post(de.order_get, {token: login, type: the.tid}).then(function (data){
                        var dd = data.data;
                        console.log(dd);
                        the.order = dd.data;
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                // 确认收货
                order_confirm: function ( id ) {
                    // 提交数据
                    axios.post(de.order_confirm, {id: id}).then(function (data){
                        var dd = data.data;
                        console.log(dd);
                        if (dd.code == 200) {
                            window.location.reload();
                        } else {
                            alert(dd.info);
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });
                }
            },
        });
    </script>
</body>

</html>